<template>
  <div class="show">
    <Vheader title="商品分类"></Vheader>
    <!--<mt-header title="商品分类">-->
      <!--<router-link to="/" slot="left">-->
        <!--<mt-button icon="back"></mt-button>-->
      <!--</router-link>-->
    <!--</mt-header>-->
    <section class="main">
      <div class="cl">
        <ul class="typeList">
          <li v-for="item in group"
              v-if="item.type == 2 && item.level == 1"
              @click="showList(item.groupId)"
              :class="{ active: isActive == item.groupId }"
          >{{item.groupName}}
          </li>
        </ul>
      </div>
      <div class="cr">
        <div>
          <p class="typeImg"
             v-for="imgs in group"
             v-if="imgs.type == 2 && imgs.level == 1"
             v-show="imgs.groupId == flag">
            <img :src="imgs.banner" alt="">
          </p>
          <ul class="goodsList">
            <a v-for="good in list" @click="goodsList(good.groupId)">
                <span>
                  <img :src="good.banner"/>
                </span>
              <span>{{good.groupName}}</span>
            </a>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import axios from '../../axios/axios'
  import Vheader from '../../components/header'
  // import vFooter from '@/components/footer'
  export default {
    name: 'show',
    data() {
      return {
        city: '杭州',
        weizhi: false,
        group: {},
        flag: '1',
        list: {},
        isActive: '1'
      }
    },
    components: {
      Vheader
    },
    mounted: function () {
      this.group = JSON.parse(localStorage.getItem('group'))
      this.showList(1);
    },
    methods: {
      showList: function (id) {
        // console.log(id)
        var that = this;
        that.flag = id;
        that.isActive = id;
        var data = JSON.stringify({
          "actionName": "queryListPage",
          "controllerName": "productGroup",
          "data": [{
            "parentId": that.flag
          },
            1]
        });
        axios.post({
          data: data,
          callback(res) {
            that.list = res.data.data;
            // console.log(res.data)
          }
        })
      },
      goodsList: function (id) {
        var that = this;
        // console.log(id)
        that.$router.push({path: '/goodList', query: {id: id}});
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  @import "../../common/style/public";
  .show {
    .main {
      /*border-top: 1px solid #e3e3e3;*/
      .cl {
        width: 25%;
        height: 100%;
        /*border-right: 1px solid #e3e3e3;*/
        position: fixed;
        top: 46px;
        left: 0;
        z-index: 1000;
        overflow: auto;
        background-color: #FFFFFF;
        ul {
          li {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #f5f5f5;
            text-align: center;
            line-height: 50px;
            font-size: 14px;
            box-sizing: border-box;
          }
          li.active {
            color: red;
            border-left: solid 3px red;
            background-color: #f5f5f5;
          }
        }
      }
      .cr {
        width: 74%;
        height: 100%;
        position: fixed;
        top: 46px;
        right: 0;
        z-index: 1000;
        overflow: auto;
        div {
          .typeImg {
            width: 95%;
            height: 40vw;
            border: 6px solid #f5f5f5;
            img {
              width: 100%;
              height: 100%;
            }
          }
          ul {
            display: flex;
            flex-wrap: wrap;
            a {
              display: flex;
              flex-direction: column;
              /*justify-content: space-around;*/
              width: 33%;
              height: 120px;
              span {
                img {
                  width: 80%;
                  height: 86%;
                }
              }
              span:nth-child(1) {
                width: 100%;
                height: 70%;
                text-align: center;
              }
              span:nth-child(2) {
                width: 100%;
                height: 30%;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }

</style>







